<template>
	<view class="page" :class="getThemeClass">
		<!-- 转赠 -->
		<!-- <unavbar :title="i18n.record3"></unavbar> -->
		<view class="card card-bg">
			<view class="cover_img">
				<image :src="itemData.cover" style="border-radius: 10rpx;" mode="widthFix"></image>
			</view>
			<view class="card_flex">
				<!-- NFT铸品名称 -->
				<view>{{itemData.title}}</view>
				<!-- <view class="price"><text>￥</text>
					199.00</view> -->
			</view>
		</view>
		<!-- 转出平台账户 -->
		<view class="title">{{i18n.Copyright1}}</view>
		<!-- 请输入转出的手机账号 -->
		<input class="myinput card-bg" type="text" v-model="params.other_info" :placeholder="i18n.derivatives1"
			placeholder-class="input_pla text-placeholder" />
		<!-- 安全密码 -->
		<view class="title">{{i18n.Copyright3}}</view>
		<!-- 输入安全密码 -->
		<input class="myinput card-bg" type="text" v-model="params.security" :placeholder="i18n.Copyright4"
			placeholder-class="input_pla text-placeholder" />
		<view class="hint color-red">
			<!-- * 转出时请注意核对地址，资产一旦转出将无法找回 -->
			* {{i18n.Copyright5}}
		</view>
		<!-- 确认转出 -->
		<botBtnp :btnText="i18n.Copyright6" style="margin-top: 200rpx;" @click.native="transferOut"></botBtnp>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					product_pre_id: null, //作品id
					other_info: '', //手机号
					type: 1, //	转增类型1内部2外部
					security: '', //安全密码
				},
				itemData: {}
			};
		},
		onLoad(option) {
			// console.log(option.item);
			// if (option.item) {
			// 	this.itemData = JSON.parse(decodeURIComponent(option.item))
			// }
			// this.params.product_pre_id = this.itemData.id
			this.params.product_pre_id = option.id
			this.loadData()
		},
		methods: {
			loadData(){
				this.$u.api.my_wallet_object_detail({id: this.params.product_pre_id}).then(res => {
					// console.log(res);
					this.itemData = res.data.detail
				})
			},
			transferOut() {
				if (!this.params.other_info) {
					this.$refs.uToast.show({
						// 请输入手机账号
						title: this.i18n.Copyright7,
						type: 'error',
					})
					return false
				}
				if (!this.params.security) {
					this.$refs.uToast.show({
						// 请输入密码
						title: this.i18n.Copyright8,
						type: 'error',
					})
					return false
				}
				if (!this.params.product_pre_id) {
					this.$refs.uToast.show({
						// 转出失败,请稍后再试
						title: this.i18n.Copyright9,
						type: 'error',
					})
					return false
				}
				if (!this.params.type) {
					this.$refs.uToast.show({
						// 转出失败,请稍后再试
						title: this.i18n.Copyright9,
						type: 'error',
					})
					return false
				}
				this.$u.api.given(this.params).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							// 转赠成功
							title: this.i18n.Copyright10,
							type: 'success',
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '../transferRecord/transferRecord'
							})
						}, 1000)
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .box {
	// 	background-color: #F9F9F9;
	// 	min-height: 100vh;
	// }

	// page {
	// 	background-color: #F9F9F9;
	// }

	// .page-black {
	// 	background-color: #1E2020;
	// 	min-height: 100vh;

	// 	.card {
	// 		background-color: #292B2B;

	// 		.card_flex {
	// 			color: #FFFFFF;

	// 			.price {
	// 				color: #F7924C;
	// 			}
	// 		}
	// 	}

	// 	.title {
	// 		color: #FFFFFF;
	// 	}

	// 	.myinput {
	// 		background-color: #292B2B;
	// 		color: #FFFFFF;
	// 	}
	// }
	.page {
		padding-top: 30rpx;
	}
	.card {
		height: 266rpx;
		border-radius: 12rpx;
		// background-color: #fff;
		margin: 0rpx 30rpx 20rpx;
		display: flex;
		align-items: center;

		.cover_img {
			width: 200rpx;
			height: 200rpx;
			margin-left: 30rpx;
			overflow: hidden;
		}

		image {
			width: 100%;
		}

		.card_flex {
			padding: 30rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 30rpx;
			// color: #333333;
			font-weight: bold;
		}

		.price {
			// color: #A11716;
			font-size: 32rpx;

			text {
				font-size: 24rpx;
			}
		}
	}

	.title {
		// color: #333333;
		font-size: 26rpx;
		margin: 36rpx 0 20rpx 30rpx;
	}

	.myinput {
		height: 100rpx;
		// background-color: #fff;
		margin: 24rpx 30rpx 40rpx;
		padding-left: 30rpx;
		border-radius: 20rpx;
	}

	.input_pla {
		// color: #AAAAAA;
		font-size: 28rpx;
	}

	.hint {
		margin: 30rpx 40rpx;
		// color: #B3272A;
		font-size: 24rpx;
	}
</style>
